<template>
      <div class="leftTree">
           <div style="margin-top: 10px;margin-left: 8px;margin-right: 8px;">
              <el-input
                    v-model="deptName"
                    placeholder="请输入部门名称"
                    clearable
                    @input="searchDept"
                    size="small"
                    prefix-icon="el-icon-search"
                />
           </div>
           <el-tree 
                ref="deptTree"
                node-key="id"
                :props="defaultProps"
                :data="treeData"  
                :default-expanded-keys="expandedKeys"
                :highlight-current="true"
                @node-click="handleNodeClick">
           </el-tree>
      </div>
</template>
<script lang="ts">
 
import { Component, Vue,Inject, Emit} from 'vue-property-decorator';
import UserDeptApi from "@/api/user-api";
import TreeUtils from "@/utils/tree-utils"; 
import _ from 'lodash';
@Component({
  components: {
  },
})
export default class UserList extends Vue {
     @Inject() tabIndexRef!: any;
     private treeData:any=[];
     private orgData=[];
     private orgTreeData:any=[];
     private params:any={};
     private deptName:any="";
     private checkData:any=[];
     private expandedKeys:any=[];
     private defaultProps:any={
          children: 'children',
          label: 'label'
     };
     //生命周期函数
     async created(){
          let result=await UserDeptApi.getDept({});
          this.treeData=result.topItem;
          this.orgTreeData=_.cloneDeep(result.topItem);
          this.orgData=result.reqOrgData;
          this.expandedKeys=[this.treeData[0].id];
          this.treeData[0].children.forEach(item => {
               this.expandedKeys.push(item.id);
          });
          this.$nextTick(()=>{
                const username=localStorage.getItem("username");
                const deptTreeSelectItemId=localStorage.getItem("deptTreeSelectItem"+"_"+username);
                (this.$refs.deptTree as any).setCurrentKey(deptTreeSelectItemId);
                this.expandedKeys.push(deptTreeSelectItemId);
          });
     }
     //点击节点事件
      @Emit("clickDept")
     private handleNodeClick(data:any){
           //获取当前用户
           const username=localStorage.getItem("username");
           localStorage.setItem("deptTreeSelectItem"+"_"+username,data.id);
           return data;
     }
     //搜索部门,将搜索结果全部展开
     private searchDept(){
          if(!this.deptName){
               this.treeData=this.orgTreeData;
               return false;
          }
          const uniqRes:any=TreeUtils.getTreeDataBySearchText(this.orgData,this.deptName);
          const topItem:any=uniqRes.filter(item=>item.pId==0);
          TreeUtils.getTreeData(uniqRes,topItem[0]);
          this.treeData=topItem;
     }
}
</script>
<style lang="less">
     .leftTree{
           min-width: 200px;
           height: 100%;
           border-right: 1px solid #dfe4ed;
           background-color: white;
           margin-top: 5px;
           .el-tree{
                 height: calc(100% - 60px);
                 overflow: auto;
           }
           .el-tree-node__label{
                 font-size: 13px!important;
           }
      }
</style>
